<template >
          <div style="padding:20px">
             <a-list
            :grid="{ gutter: 16, column: 1 }"
          >
            <a-checkbox-group
              v-decorator="['checkbox-group']"
              style="width: 100%"
              name="radioGroup"
              v-for="(item, index) in this_facets"
              :key="index"
              :value="selectvalue"
            >
              <a-collapse :defaultActiveKey="activeKey">
                <a-collapse-panel
                  :key="String(index)"
                  :header="item.label"
                  :style="customStyle"
                  class="sliderhead"
                >
                  <a-form-item>
                    <div v-if="isShowFacetList">
                      <a-row v-for="(op, i) in item.facetList" :key="i">
                        <a-col :span="20">
                          <a-checkbox
                            :value="op.code"
                            :data-id="op.id"
                            :name="item.id"
                            :checked="checked"
                            @change="
                              ChangeFilter(
                                item.label,
                                item.id,
                                op.id,
                                op.code,
                                op.name,
                                'true'
                              )
                            "
                          >
                            &nbsp; &nbsp;
                            {{ op.name }}
                          </a-checkbox>
                        </a-col>
                        <a-col :span="4">
                          <a-badge
                            :count="op.count"
                            :overflow-count="999999999999"
                            :number-style="{ backgroundColor: '#52c41a' }"
                          />
                        </a-col>
                      </a-row>
                    </div>
                  </a-form-item>
                </a-collapse-panel>
              </a-collapse>
            </a-checkbox-group>
          </a-list>
          </div>
</template>

<script>
// import this.$store from "../components/this.$store";

export default {
  props: {
    // state: Object,
    // f: Array,
  },
  data: () => ({
          //   slider
      checked: true,
      activeKey: ["0", "1", "2", "3", "4", "5", "6"],
      selectvalue: [],
      customStyle: {
        background: "#2780e3",
        color: "#fff",
        border: "0",
      },
      headStyles: {
        color: "#2780e3",
        background: "#f5f5f5",
      },
      headStyless: {
        disply: "none",
      },
  }),
  watch: {},
  computed: {
    //   slider start
    this_facets() {
      var that = this;
      var facets = [];
      if (
        Object.prototype.hasOwnProperty.call(
          this.$store.state[this.$store.state.Namedparent.name].books.rs,
          "facetsList"
        )
      ) {
        var len1 = this.$store.state[this.$store.state.Namedparent.name].books.rs.facetsList.length;
        var label;
        var id;
        var value;
        var count;
        for (var i = 0; i < len1; i++) {
          var facet = [];
          var len2 = this.$store.state[this.$store.state.Namedparent.name].books.rs.facetsList[i].facetList.length;
          for (var j = 0; j < len2; j++) {
              //纸书
              label = this.$store.state[this.$store.state.Namedparent.name]
                .books.rs.facetsList[i].facetList[j].name;
              value = this.$store.state[this.$store.state.Namedparent.name]
                .books.rs.facetsList[i].facetList[j].code;
              count = this.$store.state[this.$store.state.Namedparent.name]
                .books.rs.facetsList[i].facetList[j].count;
              id =
                that.$store.state[that.$store.state.Namedparent.name].books.rs
                  .facetsList[i].facetList[j].name;
              
            facet[j] = {
              id: id,
              label: label,
              value: value,
              count: count,
              name: label,
              code: value,
            };
            // 检查过滤条件中是否已经被勾选
            var filters_len = this.$store.state[
              this.$store.state.Namedparent.name
            ].books.qs.filters;
            for (var fi = 0; fi < filters_len; fi++) {
              if (
                this.$store.state[this.$store.state.Namedparent.name].books.rs
                  .facetsList[i].facetsList[j].id ==
                this.$store.state[this.$store.state.Namedparent.name].books.qs
                  .filters[fi].id
              ) {
                if (
                  this.$store.state[
                    this.$store.state.Namedparent.name
                  ].books.qs.filters[fi].values.index(value)
                ) {
                  facet[j].checked = false;
                } else {
                  facet[j].checked = true;
                }
              }
            }
          }

          facets[i] = {
            facetList: facet,
            id: this.$store.state[this.$store.state.Namedparent.name].books.rs
              .facetsList[i].id,
            label: this.$store.state[this.$store.state.Namedparent.name].books
              .rs.facetsList[i].label,
          };
        }
        that.selectvalue = [];

        var folerts = this.$store.state[this.$store.state.Namedparent.name]
          .books.qs.filters;
        for (var ei = 0; ei < folerts.length; ei++) {
          for (var ej = 0; ej < folerts[ei].values.length; ej++) {
            that.selectvalue.push(folerts[ei].values[ej]);
          }
        }

        return facets;

      } else {
        return {};
      }
    },
    // slider end
  },
  methods: {
    //   slider start
    isShowFacetList: function (facetList) {
      return facetList.length > 0;
    },
    ChangeFilterV2: function () {
      console.log("ChangeFilterV2: ");
    },
    ChangeFilter: function (lable,fieldclassName, id, code, name, do_search_book) {
        //  this.$router.push({
        //   path:'/PaperbookSearch',
        //   query: { searchtitle: this.$route.query.searchtitle },
        // });
      this.$store.commit(
        this.$store.state.Namedparent.name + "/clearsearchwordks",this.$route.query.searchtitle
      );
      this.$store.commit(
        this.$store.state.Namedparent.name + "/SHOW_DETAIL",
        false
      );
      this.$store.commit(
        this.$store.state.Namedparent.name + "/Changeloading",
        true
      );
      this.$store.commit(
        this.$store.state.Namedparent.name + "/ChangeCurrentPage",
        1
      );
      return new Promise(() => {
        this.$store.commit(
          this.$store.state.Namedparent.name + "/ChangeCurrentPageWithOutSync",
          1
        );
        this.$store.commit(
          this.$store.state.Namedparent.name + "/SearchSideUpdateFilters",
          {
            fieldName:fieldclassName,
            code: code,
            value:name,
            lable:lable
          },
          do_search_book
        );
       });
      //   console.log("addFilters:", this.$store.state[this.$store.state.Namedparent.name].books.qs.filters);
    },
    // slider end
  },
  mounted() {
    this.this_state = this.state;
    console.log("sss:", this.state, this.f);
  },
};
</script>

<style scoped>
/deep/.sliderhead .ant-collapse-header{
  color: #fff  !important;
}
/* /deep/.sliderhead .ant-collapse-arrow{
  right: 15px;
  left: 0 !important;
} */
/deep/.ant-collapse-item:last-child > .ant-collapse-content{
  border-radius: 0;
}
/deep/.ant-form-item{
  margin-bottom: 0;
}
/deep/.ant-collapse{
  border-radius: 0;
  border-bottom: 1px solid #d9d9d9;
}
/deep/.ant-collapse > .ant-collapse-item{
  border-bottom: none;
}
/deep/.ant-checkbox-group{
  margin-bottom: 15px;
}
</style>